<template>
    <div class="prescriptionItem">

      <div>

        <div class="checkbox">

          <span v-if="method == 1">直接售药</span>
          <span v-else>{{data.category_name + data.id}}</span>
          <span class="red" v-if="data.is_charge">({{str}}库存不足，无法售药)</span>
        </div>

        <template>
          <el-table
            ref="multipleTable"
            :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                        'text-align':'center'
                    }"
            :cell-style="{'text-align':'center'}"
            :data="data.details"
            @selection-change="handleSelectionChange"
            @select-all="selectAll"
            border
            style="width: 100%">
            <el-table-column
              v-if="(type == 1 || type == 2 || type == 3) && !data.is_charge"
              type="selection"
              :selectable="selectable"
              width="50">
            </el-table-column>
            <el-table-column
              prop="product_name"
              label="药品名称"
              width="200">
            </el-table-column>
            <el-table-column
              prop="pack"
              label="规格包装"
              width="100">
            </el-table-column>
            <el-table-column
              prop="production"
              label="厂家"
              min-width="300">
            </el-table-column>
            <el-table-column
              v-if="type == 3 || (type == 1 && status)"
              prop="shelf_no"
              label="货架号"
              width="150">
            </el-table-column>
            <el-table-column
              v-if="(type == 3 || (type == 1 && status)) && isDrug"
              prop="batch_no"
              label="批次号"
              width="150">
            </el-table-column>
            <el-table-column
              v-if="type == 3 || (type == 1 && status)"
              prop="expire_time"
              label="效期"
              width="150">
            </el-table-column>
            <el-table-column
              prop="number"
              label="数量"
              width="150">
              <template slot-scope="scope">
                <el-input v-if="type == 2" v-model="scope.row.refundNum" placeholder="请输入数量" @input="(val)=>{inputChange(val,scope.$index)}"></el-input>
                <span v-else>{{scope.row.number }}</span>
                <span>{{scope.row.unit}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              width="100">
              <template slot-scope="scope">
                <span>¥{{scope.row.price.toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="amount"
              label="金额"
              width="100">
              <template slot-scope="scope">
                <span v-if="type == 2" class="price">¥{{(scope.row.price*scope.row.refundNum).toFixed(2)}}</span>
                <span v-else class="price">¥{{scope.row.amount.toFixed(2)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

    </div>
</template>

<script>
    export default {
        name: "prescriptionItem",
        model:{
            prop:'selection',
            event:'change'
        },
        props:{
            data:Object,
            method:{
                type:Number,
                default:1,
            },
            type:{
                type:Number,
                default:0,
            }
        },
        watch: {
            data: {
                handler(newval, oldval) {
                    if (this.type == 1 && !newval.is_charge){
                        setTimeout(()=>{
                            this.$refs.multipleTable.toggleAllSelection();
                        },100)
                    }
                    if (newval.is_charge){
                        this.str = "";
                        for (let i = 0; i < newval.charge_product.length; i++){
                            for (let j = 0; j < newval.details.length; j++){
                                if (newval.charge_product[i].product_id == newval.details[j].product_id){
                                    this.str = this.str + newval.details[j].product_name
                                    if (i != newval.charge_product.length-1){
                                        this.str = this.str + ","
                                    }
                                    break;
                                }
                            }
                        }
                    }

                    this.status = 1;
                    if (this.$store.getters.systemSetting.dic_value){
                        let obj = JSON.parse(this.$store.getters.systemSetting.dic_value);
                        this.status = Number(!obj.charge_dispensing_management.function_set)
                    }
                    if (this.$store.getters.systemSetting.dic_value){
                        let obj = JSON.parse(this.$store.getters.systemSetting.dic_value);
                        this.isDrug = obj.drugs_management.function_set
                    }
                },
                immediate: true,
            },
        },
        data:function () {
            return{
                tableData: [],
                checked:false,
                multipleSelection: [],
                allSelect:false,
                refundNum:0,
                str:'',
                status:1,
                isDrug:false,
            }
        },
        mounted:function(){
            // for (let i = 0; i < this.data.details.length; i++){
            //     let num = this.data.details[i].number
            //     this.data.details[i].refundNum = num;
            // }

            // if (this.type == 1){
            //     this.$refs.multipleTable.toggleAllSelection();
            // }

        },
        methods:{
            handleSelectionChange:function(val) {
                this.multipleSelection = [];
                for (let i = 0; i < val.length; i++){
                    let a = {...val[i]}
                    this.multipleSelection.push(a);
                }
                // console.log(this.multipleSelection)
                this.$emit("dataChange",{id:this.data.id,name:this.data.name,remark:this.data.remark,category_key:this.data.category_key,category_name:this.data.category_name,details:this.multipleSelection})
            },
            selectable:function (item) {

                return this.type == 2;
            },
            selectAll:function (val) {

                if (this.type == 1 || this.type == 3){
                    this.allSelect = !this.allSelect
                    this.$emit("dataChange",{id:this.data.id,name:this.data.name,remark:this.data.remark,category_key:this.data.category_key,category_name:this.data.category_name,details:this.allSelect?this.data.details:[]})
                }
            },
            inputChange:function (val,index) {
                let str = val+'';
                str=str.replace(/[^\d]/g,0)

                if (str <=0){
                    str = 1;
                }
                if (str > this.data.details[index].number){
                    str = this.data.details[index].number
                }
                this.data.details[index].refundNum = str;

                for (let i = 0; i < this.multipleSelection.length; i++){
                    if (this.multipleSelection[i].id == this.data.details[index].id){
                        this.multipleSelection[i].refundNum = this.data.details[index].refundNum;
                        this.$emit("dataChange",{id:this.data.id,name:this.data.name,remark:this.data.remark,category_key:this.data.category_key,category_name:this.data.category_name,details:this.multipleSelection})
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/payOrDrug/prescriptionItem.scss";
</style>
